﻿
function XShape(domEl) {

    this._domEl = domEl;
    this._pos = { x: 0, y: 0 };
    this._size = { w: 0, h: 0 };

    this.setPos = function (x, y) {
        this._pos.x = x;
        this._pos.y = y;
        this.onPosChanged();

        return this;
    }

    this.setSize = function (w, h) {
        this._size.w = w;
        this._size.h = h;
        this.onSizeChanged();

        return this;
    }

    // 坐标变动
    this.onPosChanged = function () {
        this._domEl.setAttribute("x", this._pos.x);
        this._domEl.setAttribute("y", this._pos.y);
    }

    // 大小变动
    this.onSizeChanged = function () {
        this._domEl.setAttribute("width", this._size.w);
        this._domEl.setAttribute("height", this._size.h);
    }
}

//矩形
function XRectangle(domEl) {
    XShape.apply(this, [domEl]);
}

//圆形
function XCircle(domEl) {
    XShape.apply(this, [domEl]);

    this.onPosChanged = function () {
        this._domEl.setAttribute("cx", this._pos.x);
        this._domEl.setAttribute("cy", this._pos.y);
    }

    this.onSizeChanged = function () {
        this._domEl.setAttribute('r', this._size.w);
    }
}

//图片
function XImage(domEl) {
    XShape.apply(this, [domEl]);

    this.setUrl = function (src) {
        this._domEl.href.baseVal = src;
        return this;
    }
}

//文本
function XText(domEl) {
    XShape.apply(this, [domEl]);

    this._domEl.setAttribute("font-size", "9px");

    this.setText = function (text) {
        this._domEl.textContent = text;
        return this;
    }
}

//线条
function XLine(domEl) {
    this._domEl = domEl;

    // 设置连线的坐标点信息
    // @value:Point[]  -->[{x:1,y:1},{x:2,y:2},{x:3,y:3}]
    this.setPoints = function (value) {
        var pointString = '';
        if (value != null) {
            for (var index = 0; index < value.length; index++) {
                pointString += value[index].x + ',' + value[index].y + ' ';
            }
        }
        this._domEl.setAttribute("points", pointString);
        if (this._domEl.parentNode != null) {
            //解决IE bug的方法
            this._domEl.parentNode.insertBefore(this._domEl, this._domEl);
        }
        return this;
    }
}

//菱形
function XDiamond(domEl) {
    XShape.apply(this, [domEl]);

    this.onPosChanged = function () {
        this._domEl.setAttribute("points", this.getStrPath(this._pos, this._size));
    }

    this.onSizeChanged = function () {
        this._domEl.setAttribute("points", this.getStrPath(this._pos, this._size));
    }

    this.getDiamodPath = function (pos, size) {
        var p1 = [pos.x - size.w / 2 + "," + pos.y];
        var p2 = [pos.x + "," + (pos.y - size.h / 2)];
        var p3 = [pos.x + size.w / 2 + "," + pos.y];
        var p4 = [pos.x + "," + (pos.y + size.h / 2)];
        return [p1, p2, p3, p4];
    }

    this.getStrPath = function (pos, size) {
        var points = this.getDiamodPath(pos, size);
        var str = "";
        for (var i = 0; i < points.length; i++) {
            str += points[i].join(",") + " ";
        }
        return str.substring(0, str.length - 1);
    }
}

function XGraphics() {
    this.createSvg = function () {
        var _nameSpace = "http://www.w3.org/2000/svg";
        var svg = document.createElementNS(_nameSpace, 'svg');
        svg.setAttribute('id', 'svg');
        svg.setAttribute('width', '3000px');
        svg.setAttribute('height', '3000px');

        var _defs = document.createElementNS(_nameSpace, "defs");
        var _marker = document.createElementNS(_nameSpace, "marker");
        var _path = document.createElementNS(_nameSpace, "path");
        _marker.setAttribute("id", "markerArrow");
        _marker.setAttribute("markerWidth", "13");
        _marker.setAttribute("markerHeight", "13");
        _marker.setAttribute("refX", "2");
        _marker.setAttribute("refY", "6");
        _marker.setAttribute("orient", "auto");

        _path.setAttribute("d", "M2,2 L2,11 L10,6 L2,2");
        _path.setAttribute("fill", "#000000");

        _marker.appendChild(_path);
        _defs.appendChild(_marker);
        svg.appendChild(_defs);

        return svg;
    }

    //菱形
    this.createDiamond = function () {
        var diamond = document.createElementNS("http://www.w3.org/2000/svg", "polygon");
        diamond.setAttribute("fill", "none");
        diamond.setAttribute("stroke", "#000000");
        diamond.setAttribute("stroke-width", "1");
        return new XDiamond(diamond);
    }

    //矩形
    this.createRectangle = function () {
        var rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
        rect.setAttribute('fill', 'white');
        rect.setAttribute('width', '100px');
        rect.setAttribute('height', '100px');
        rect.setAttribute("stroke", "black");
        rect.setAttribute('rx', '7.5');
        rect.setAttribute('ry', '7.5');
        return new XRectangle(rect);
    }

    //圆形
    this.createCircle = function () {
        var circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
        circle.setAttribute('fill', 'none');
        circle.setAttribute("stroke", "black");
        circle.setAttribute("stroke-width", "1");
        return new XCircle(circle);
    }

    //线条
    this.createLine = function () {
        var line = document.createElementNS('http://www.w3.org/2000/svg', 'polyline');
        line.setAttribute("fill", "none");
        line.setAttribute("marker-end", "url(#markerArrow)");
        line.setAttribute("stroke", "black");
        line.setAttribute("stroke-width", "1");
        return new XLine(line);
    }

    //创建图片
    this.createImage = function () {
        var img = document.createElementNS('http://www.w3.org/2000/svg', 'image');
        return new XImage(img);
    }

    //创建文本
    this.createText = function (text) {
        var elText = document.createElementNS('http://www.w3.org/2000/svg', 'text');
        var oText = new XText(elText);
        oText.setText(text);
        return oText;
    }
}